<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<script src="js/pintuer.js"></script>
    <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/server.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
	<div id="app">
	
				
			<div class="panel admin-panel">
			  <div class="panel-head"><strong class="icon-reorder"> 内容列表</strong></div>
			  <div class="padding border-bottom">  
			  <button type="button" class="button border-yellow" onclick="window.location.href='#add'"><span class="icon-plus-square-o"></span> 添加内容</button>
			  </div>
			  <table class="table table-hover text-center">
			    <tr>
			      <th width="10%">ID</th>
			      <th width="20%">图片</th>
			      <th width="15%">名称</th>
			      <th width="20%">描述</th>
			       <th width="10%">价格</th>
			      <th width="10%">类别</th>
			      <th width="15%">操作</th>
			    </tr>
			   
			
			    <tr v-for="prod in  lists">
			      <td>{{prod.id}}</td>     
			      <td><img v-bind:src="web_static_server+prod.prodIcon" alt="" width="120" height="50" /></td>     
			      <td>{{prod.prodName}}</td>
			      <td>{{prod.prodDesc}}</td>
			        <td>{{prod.prodPrice}}</td>
			      <td>{{prod.category?prod.category.catName:''}}</td>
			      <td><div class="button-group">
			     
			      <a class="button border-red" href="javascript:void(0)" v-on:click="del(prod.id)"><span class="icon-trash-o"></span> 删除</a>
			      </div></td>
			    </tr>
			    
			  </table>
			</div>
			
			<div class="panel admin-panel margin-top" id="add">
			  <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 增加内容</strong></div>
			  <div class="body-content">
			    <form method="post" class="form-x" action="">    
			      <div class="form-group">
			        <div class="label">
			          <label>商品名称：</label>
			        </div>
			        <div class="field">
			          <input type="text" class="input w50"  v-model="product.prodName" name="title" data-validate="required:请输入标题" />
			          <div class="tips"></div>
			        </div>
			      </div>
			      <div class="form-group">
			        <div class="label">
			          <label>价格：</label>
			        </div>
			        <div class="field">
			          <input type="text" class="input w50" name="url" v-model="product.prodPrice" />
			          <div class="tips"></div>
			        </div>
			      </div>
			      <div class="form-group">
			        <div class="label">
			          <label>图片：</label>
			        </div>
			        <div class="field">
			          <input type="file" id="url1" name="img" class="input tips" style="width:25%; float:left;"  value=""   />
			          <input type="button" class="button bg-blue margin-left"  v-on:click="upload" id="image1" value="上传"  style="float:left;">
			          <div class="tipss" v-if="product.prodIcon!=''">
			          		<img  v-bind:src="web_static_server+product.prodIcon"  style="width: 100px; height: 100px;"/>
			          </div>
			        </div>
			      </div>
			      <div class="form-group">
			        <div class="label">
			          <label>描述：</label>
			        </div>
			        <div class="field">
			          <textarea type="text" class="input" name="note" style="height:120px;" v-model="product.prodDesc"></textarea>
			          <div class="tips"></div>
			        </div>
			      </div>
			      <div class="form-group">
			        <div class="label">
			          <label>类别：</label>
			        </div>
			        <div class="field">
			        	<select class="input w50" v-model="product.prodCatId">
			        		<option value="1">种子</option>
			        		<option value="2">化肥</option>
			        		<option value="3">农药</option>
			        		<option value="4">农具</option>
			        		
			        	</select>
			          
			          <div class="tips"></div>
			        </div>
			      </div>
			      <div class="form-group">
			        <div class="label">
			          <label></label>
			        </div>
			        <div class="field">
			          <button class="button bg-main icon-check-square-o" type="button" v-on:click="add"> 提交</button>
			        </div>
			      </div>
			    </form>
			  </div>
			</div>


</div>
</body>


<script type="text/javascript">
	//Hint表示提示对象 ，把提示信息封装到hint对象中
	var vue = new Vue({
		el : '#app',
		data : {
			product:{
				prodName:'',
				prodCatId:'',
				prodPrice:'',
				prodIcon:'',
				prodDesc:'',
				prodStatus:'1'
				
			},
			lists : [],
			web_server:window.web_server,
			web_static_server:this.web_server+"/static/"
		},
		methods : {
			init : function() {
				var _self = this;
				//自定义 一个函数 ，用来查询所有的商品信息，返回Json
				$.get(_self.web_server+"/product/list", function(result) {
					if(result.code=="200"){
						_self.lists = result.data;
					}
				
				}, "json");
			},
			del:function(_id){
				var _self = this;
				if(confirm("您确定要删除吗?")){
					$.get(_self.web_server+"/product/delete",{id:_id}, function(result) {
							if(result.code=="200"){
									window.location.reload();
									
							}
					
					}, "json");
		
				}
				
			},
			add:function(){
				var _self = this;
				 $.ajax({
		           	url: _self.web_server+"/product/addNoWithUpload",
              		method: 'POST',
                 	data: _self.product,
                 	dataType:'json',
                 	success: function(result) {
                    	layer.msg(result.message);
                    	if(result.code ="200"){
                    		window.location.reload();
                    	}
                    	
                	},
                 	error: function (jqXHR) {
                 	 layer.msg("发生错误");
                     console.log(JSON.stringify(jqXHR));
                	}
            	});
				
			},
			upload:function(){
				var _self = this;
				
				if($('#url1')[0].files[0]==null){
					 layer.tips('请选择文件', '#url1');
					return;
				}
				
				
				 var formData = new FormData();
				 formData.append('file', $('#url1')[0].files[0]);
				 $.ajax({
		           	url: _self.web_server+"/common/upload",
              		 method: 'POST',
                 	data: formData,
                	contentType: false, // 注意这里应设为false
                 	processData: false,
                 	cache: false,
                 	dataType:'json',
                 	success: function(result) {
                    	
                    	 layer.msg(result.message);
                    	if(result.code ="200"){
                    		//把图片显示在旁边
                    		_self.product.prodIcon=result.data;
                    	}
                    	
                	},
                 	error: function (jqXHR) {
                 
                 	  layer.msg("发生错误");
                     console.log(JSON.stringify(jqXHR));
                	}
            	});
				 
				 
				 
				
			}


		}

	});
	//初始化Vue对象完毕之后，就调用init方法 （一进入页面，就显示数据）
	vue.init();
</script>


</html>